import { useState, useEffect } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Layout, Menu, Breadcrumb } from "antd"
import {
  HomeOutlined,// 首页 
  AppstoreOutlined, // 会诊管理
  UserOutlined,// 患者管理
  UsergroupAddOutlined,// 会诊小组
  SettingOutlined, // 系统设置
} from "@ant-design/icons"
// import * as allIcon from "@ant-design/icons" //备用

import { findParentPaths } from "@/utils/index"

const { SubMenu } = Menu
const { Sider } = Layout

// 目前demo是用路由表来做菜单。。。。到时实际情况是调接口获取左侧菜单列表
export default function SiderLeft(props: any) {
  const { pathname } = useLocation()
  let defaultOpenKeys: any = []

  let arr = props.data.routes
  arr = arr.find((i: any) => {
    return i.path === "/"
  })
  let routesList = arr.routes
  // console.log('最终路由：', routesList);

  /** *******查询需要点亮的菜单父级 根据路径获取子路由的所有父级菜单组 ********/
  defaultOpenKeys = findParentPaths(pathname)


  const renderIcon = (icon: any) => {
    let renderIcon = null
    if (!icon) {
      return null
    }
    if (icon === "HomeOutlined") {
      renderIcon = <HomeOutlined />
    }
    if (icon === "AppstoreOutlined") {
      renderIcon = <AppstoreOutlined />
    }
    if (icon === "UserOutlined") {
      renderIcon = <UserOutlined />
    }
    if (icon === "UsergroupAddOutlined") {
      renderIcon = <UsergroupAddOutlined />
    }
    if (icon === "SettingOutlined") {
      renderIcon = <SettingOutlined />
    }

    return renderIcon
  }


  const renderSubs = (meuns: any) => {
    const { push } = useHistory()
    // eslint-disable-next-line array-callback-return
    return meuns.map((menu: any) => {
      if (menu.routes && menu.name && menu.routes.length >= 1) {
        return (
          <SubMenu key={menu.path} title={menu.name} icon={renderIcon(menu.meta.icon)}>
            {renderSubs(menu.routes)}
          </SubMenu>
        )
      } else {
        if (menu.name) {
          return (
            <Menu.Item
              key={menu.path}
              onClick={() => menu.path && push(menu.path)}
              icon={renderIcon(menu.meta.icon)}
            >
              {menu.name}
            </Menu.Item>
          )
        }
      }
    })
  }

  return (
    <div className="siderLeft">
      <div className="logoWrap">
        <img src={require("@/asstes/icons/logo.png")} />
        <span style={{ fontSize: "20px" }} > 多学科会诊</span>
      </div>
      <Sider width={200} className="siderLeft-Sider">
        <Menu
          mode="inline"
          theme="light"
          defaultSelectedKeys={[pathname]}
          defaultOpenKeys={defaultOpenKeys}
          selectedKeys={[pathname]}
          style={{ height: "100%", borderRight: 0 }}
        >
          {renderSubs(routesList)}
        </Menu>
      </Sider>
    </div>
  )
}
